import React, { useState } from 'react';
import { Form, Input, Select, Upload, Button, Row, Col, UploadFile, message } from 'antd';
import { UploadOutlined, EyeOutlined } from '@ant-design/icons';

import { addproduct } from '@/api1/pord/index'

const { Option } = Select;

export const AddProducts = () => {
    // const uploadUrl = ( process.env.REACT_APP_BASE_URL + "/admin/common/upload");    // 上传的图片服务器地址
    // const baseUrl =  'http://192.168.0.84:8811/admin/file/upload/element'
    const baseUrl = 'http://192.168.0.69:8001/api/upload/updateFileToOss'
    console.log(baseUrl, 'lllllllllllllll');
    const [uploadedImageUrlDetails, setUploadedImageUrlDetails] = useState<string>('');
    const [uploadedImageUrlProduct, setuploadedImageUrlProduct] = useState<string>('');
    const [uploadedImageUrlsliderImage, setuploadedImageUrlsliderImage] = useState<string[]>([]);

    const onFinish = (values: any) => {

        addproduct({
            //   content: html,
            //   file: uploadedImageUrl,
            productParameterList: {
                barCode: values.barCode,
                beianNumber: values.beianNumber,
                brand: values.brand,
                efficacy: values.efficacy,
                isExpire: Number(values.isExpire),
                licenseNumber: values.licenseNumber,
                mainIngredients: values.mainIngredients,
                packagingType: values.packagingType,
                place: values.place,
                specificationType: values.specificationType,
                usage: values.usage
            },
            serviceDescriptionList: {
                freightInsurance: values.freightInsurance,
                gmRefund: values.gmRefund,
                indemnity: values.indemnity,
                safeguardTatement: values.safeguardTatement,
                speedReimburse: values.speedReimburse
            },
            title: values.title,
            storeName: values.storeName,
            contrapose: values.contrapose,
            contraposeDetails: values.contraposeDetails,
            price: values.price,
            graphicDetails: uploadedImageUrlDetails,
            image: uploadedImageUrlProduct,
            sliderImageList: [uploadedImageUrlProduct]

        }).then((e: any) => {
            console.log(e, 'tttttttttt');

            if (e.code == 200) {
                message.success('添加成功！');
                history.back();
            }
            else {
                message.success(e.msg);
                message.error('添加成功！');
            }

            //  navigate('/dashboard');
        })
        // Handle form submission logic here
    };

    const formItemLayout = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 8 },
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 16 },
        },
    };


    const [fileList1, setFileList1] = useState<any[]>([]); // 第一个图片文件列表
    const [fileList2, setFileList2] = useState<any[]>([]); // 第一个图片文件列表
    const [fileList3, setFileList3] = useState<any[]>([]); // 第一个图片文件列表

    const handlePreview = (file: any) => {
        // 处理预览逻辑
        console.log('Preview file:', file);
    };

    const handleChange1 = ({ fileList }: any) => {
        // 处理第一个图片上传逻辑
        setFileList1(fileList); // 更新文件列表状态
        setuploadedImageUrlProduct(fileList[0].response?.url)

        console.log('FileList1:', fileList);
    };

    const handleChange2 = ({ fileList }: any) => {
        setFileList2(fileList); // 更新文件列表状态
        setUploadedImageUrlDetails(fileList[0].response?.url)

        // 处理第二个图片上传逻辑       
        console.log('FileList2:', fileList);
    };
    const handleChange3 = ({ fileList }: any) => {
        // 比较新旧文件列表，只有当它们不相同时执行后续操作
        if (JSON.stringify(fileList) !== JSON.stringify(fileList3)) {
            setFileList3(fileList); // 更新文件列表状态


            // 获取新上传的图片地址

            // 将新地址添加到uploadedImageUrlsliderImage数组中
            if (
                fileList[fileList.length - 1].response?.url

            ) {
                const newImageUrl = fileList[0]?.response?.url;
                console.log('3kkkkk-------------:', newImageUrl);

                setuploadedImageUrlsliderImage(prevArray => [...prevArray, newImageUrl]);

            }

            console.log('FileList3:', uploadedImageUrlsliderImage);
        }


    };
    return (
        <Form {...formItemLayout} onFinish={onFinish}>
            {/* 标题 */}
            <h2 style={{ marginBottom: '20px' }}>新增商品</h2>

            {/* 图片上传 - 第一个 */}
            <Row gutter={[24, 24]} align="middle">
                <Col span={6} style={{ textAlign: 'left' }}>
                    <Form.Item
                        label="商品图片"
                        name="image1"
                        rules={[{ required: true, message: '商品图片' }]}
                    >
                        <Upload
                            showUploadList={false}
                            action={baseUrl}
                            listType="picture-card"
                            fileList={fileList1}
                            onPreview={handlePreview}
                            onChange={handleChange1}
                        >

                            {uploadedImageUrlProduct ? (
                                <img src={uploadedImageUrlProduct} alt="Uploaded Image" style={{ width: '100%' }} />
                            ) : (
                                <div>
                                    <UploadOutlined />
                                    <div style={{ marginTop: 8 }}>点击上传</div>
                                </div>
                            )}
                        </Upload>
                    </Form.Item>
                </Col>

                {/* 图片上传 - 第二个 */}
                <Col span={6} style={{ textAlign: 'left' }}>
                    <Form.Item
                        label="商品详情图片"
                        name="image2"
                        rules={[{ required: true, message: '请上传商品详情图片' }]}
                    >
                        <Upload
                            showUploadList={false}
                            action={baseUrl}
                            listType="picture-card"
                            fileList={fileList2}
                            onPreview={handlePreview}
                            onChange={handleChange2}
                        >
                            {uploadedImageUrlDetails ? (
                                <img src={uploadedImageUrlDetails} alt="Uploaded Image" style={{ width: '100%' }} />
                            ) : (
                                <div>
                                    <UploadOutlined />
                                    <div style={{ marginTop: 8 }}>点击上传</div>
                                </div>
                            )}
                        </Upload>
                    </Form.Item>
                </Col>

                <Col span={12} style={{ textAlign: 'left' }}>
                    <Form.Item
                        label="商品详情轮播图片"
                        name="image2"
                        rules={[{ required: false, message: '请上传商品详情轮播图片' }]}
                    >
                        <Upload

                            action={baseUrl}
                            listType="picture-card"
                            fileList={fileList3}
                            onPreview={handlePreview}
                            onChange={handleChange3}
                        >
                            {uploadedImageUrlDetails ? (
                                <img src={uploadedImageUrlDetails} alt="Uploaded Image" style={{ width: '100%' }} />
                            ) : (
                                <div>
                                    <UploadOutlined />
                                    <div style={{ marginTop: 8 }}>点击上传</div>
                                </div>
                            )}
                        </Upload>
                    </Form.Item>
                </Col>
            </Row>

            {/* 输入框和下拉框放在同一行 */}
            <Row gutter={[16, 16]}>
                {/* 输入框 */}
                <Col span={6}>
                    <Form.Item
                        label="商品价格"
                        name="price"
                        rules={[{ required: true, message: '请输入商品价格' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item
                        label="商品名称"
                        name="storeName"
                        rules={[{ required: true, message: '请输入商品名称' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item
                        label="商品标题"
                        name="title"
                        rules={[{ required: true, message: '请输入内容' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>

                <Col span={6}>
                    <Form.Item
                        label="针对部位"
                        name="contrapose"
                        rules={[{ required: true, message: '请输入内容' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>

                <Col span={6}>
                    <Form.Item
                        label="针对详情"
                        name="contraposeDetails"
                        rules={[{ required: true, message: '请输入内容' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                {/* 下拉框 */}
                {/* <Col span={6}>
                    <Form.Item
                        label="下拉框1"
                        name="select1"
                        rules={[{ required: true, message: '请选择内容' }]}
                    >
                        <Select>
                            <Option value="option111">Option 1</Option>
                            <Option value="option2222">Option 2</Option>
                        </Select>
                    </Form.Item>
                </Col> */}
            </Row>

            {/* Additional Fields */}
            <Row gutter={[16, 16]}>
                <Col span={6}>
                    <Form.Item
                        label="品牌"
                        name="brand"
                        rules={[{ required: true, message: '请输入品牌' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item
                        label="是否临期"
                        name="isExpire"
                        rules={[{ required: true, message: '请选择是否临期' }]}
                    >
                        <Select>
                            <Option value="0">是</Option>
                            <Option value="1">否</Option>
                        </Select>
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item
                        label="使用方法"
                        name="usage"
                        rules={[{ required: true, message: '请输入使用方法' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item
                        label="主要成分"
                        name="mainIngredients"
                        rules={[{ required: true, message: '请输入主要成分' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item
                        label="包装类型"
                        name="packagingType"
                        rules={[{ required: true, message: '请输入包装类型' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item
                        label="功效"
                        name="efficacy"
                        rules={[{ required: true, message: '请输入功效' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item
                        label="规格类型"
                        name="specificationType"
                        rules={[{ required: true, message: '请输入规格类型' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item
                        label="备案号"
                        name="beianNumber"
                        rules={[{ required: true, message: '请输入备案号' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item
                        label="产地"
                        name="place"
                        rules={[{ required: true, message: '请输入产地' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item
                        label="生产许可证编号"
                        name="licenseNumber"
                        rules={[{ required: true, message: '请输入生产许可证编号' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item
                        label="条形码"
                        name="barCode"
                        rules={[{ required: true, message: '请输入条形码' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
            </Row>


            <Row gutter={[16, 16]}>
                <Col span={6}>
                    <Form.Item
                        label="运费险说明"
                        name="freightInsurance"
                        rules={[{ required: true, message: '请输入品牌' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>

                <Col span={6}>
                    <Form.Item
                        label="过敏包退"
                        name="gmRefund"
                        rules={[{ required: true, message: '请输入使用方法' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item
                        label="晚发即赔"
                        name="indemnity"
                        rules={[{ required: true, message: '请输入主要成分' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item
                        label="保障说明"
                        name="safeguardTatement"
                        rules={[{ required: true, message: '请输入包装类型' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item
                        label="急速退款"
                        name="speedReimburse"
                        rules={[{ required: true, message: '请输入功效' }]}
                    >
                        <Input />
                    </Form.Item>
                </Col>

            </Row>

            {/* 响应式布局 */}
            <Form.Item wrapperCol={{ span: 24 }}>
                <Row justify="center">
                    <Col>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Col>
                </Row>
            </Form.Item>
        </Form>
    );
};
